<script setup lang="ts">
import {ref} from "vue";
import type {RouteRecordRaw} from "vue-router";
import {NRadioButton, NRadioGroup, NSpace} from 'naive-ui'

const props = defineProps({
    buttons: {
        type: Array<RouteRecordRaw>,
        required: true,
    },
});
const value = ref("")
</script>

<template lang="pug">
NRadioGroup
    NRadioButton( v-for="song in buttons" :key="song.meta.title" :value="song.meta.title")
        a  {{ $t(song.meta.title) }}
</template>

<style scoped lang="scss">
a {
    font-size: 24px;
    color: #fff;
    font-family: 'Cinzel', serif;
    display: block;
    transition: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.n-radio-button {
    font-size: 24px;
    color: #fff;
    font-family: 'Cinzel', serif;
    white-space: nowrap;
    background: #0f0f0f;
    text-align: -webkit-match-parent;
    border: none;

    :hover {
        text-shadow: 0 0 14px rgba(255, 107, 55, 0.75), 0 0 14px rgba(255, 107, 55, 0.75), 0 0 14px rgba(255, 107, 55, 0.75), 0 0 14px rgba(255, 107, 55, 0.75), 0 0 14px rgba(255, 107, 55, 0.75);
    }


    .n-radio-button__state-border {
        position: absolute;
        display: none;

    }
}

.n-radio-group {
    --n-button-border-color: #0f0f0f;
    --n-button-border-color-active: #0f0f0f;

    .n-radio-button.n-radio-button--checked {
        background: black;
        color: beige;
        border-color: black;
        --n-button-border-color-active: #0f0f0f;
        --n-button-border-color: #0f0f0f;
    }

    .n-radio-group__splitor {
        background: #0f0f0f;
    }
}
</style>